<template>
	<view class="Lu-code-header">
		<view class="Lu-code-tit">请输入验证码</view>
		<view class="Lu-code-phone">已发送验证码至+86<text>{{phone}}</text></view>
		<one-input v-model="test" @finish="finishedOne" class="Lu-code-codeinput"></one-input>
		<view class="clearfix Lu-code-getcode">
			<view v-show="show" class="count fr">{{count}}s<span>后重新获取验证码</span></view>
			<view v-show="!show" class="fr Lu-code-congxin" @click="getCode">重新发送</view>
		</view>
		
	</view>
</template>
<script>
	import oneInput from '@/components/myp-one/myp-one.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			oneInput
		},
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data() {
			return {
				test: '',
				show: true,
				count: '60',
				timer: null,
				phone:''
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.phone=option.phone;
		},
		onShow:function(){
			this.countDown()
		},
		methods: {
			finishedOne(val) {
				
				uni.request({
					url:this.apiUrl+ 'api/login_app',
					data:{
						phone:this.phone,
						type:3,
						code:val
					},
					method:'POST',
					success: (res) => {
						const _this = this
						console.log(res)
						if(res.data.msg == '账号不存在!'){
							
							uni.redirectTo({
							  url: `/pages/apppersonal/wxlogin?phone=${this.phone}`
							});
						}else{
							_this.$store.commit('setOpenid',res.data.data.openid);
							uni.request({
								url:_this.apiUrl+ 'api/userInfo',
								data:{
									
								},
								header:{
									openid:res.data.data.openid
								},
								method:'POST',
								success: (res) => {
									console.log(res.data.data)
									_this.$store.commit('login', res.data.data);
									// _this.$store.commit('set', res.data.data);
									// this.hasLogin = this.$store.state.hasLogin
									uni.switchTab({
									  url: '/pages/index/index'
									});
								},
							})
						}
					}
				})
			},
			countDown:function(){
				this.timers=setInterval(() => {
					this.count--;
					if(this.count<=0){
						clearInterval(this.timers);
						this.show = false
					}
				},1000);
				uni.request({
					url:this.apiUrl+ 'api/post_sms',
					data:{
						phone:this.phone,
						type:3
					},
					method:'POST',
					success: (res) => {
						console.log(res)
					}
				})
			},
			getCode() {
				console.log(1)
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = true;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = false;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
				uni.request({
					url:this.apiUrl+ 'api/post_sms',
					data:{
						phone:this.phone,
						type:3
					},
					method:'POST',
					success: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.Lu-code-header{
		padding: 0 50rpx;
		.Lu-code-tit{
			font-size: 50rpx;
			color: #000000;
			font-weight: 600;
			margin-top: 150rpx;
		}
		.Lu-code-phone{
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
			text{
				margin-left: 20rpx;
			}
		}
		.Lu-code-codeinput{
			margin-top: 100rpx;
		}
		.Lu-code-getcode{
			margin-top: 30rpx;
			.count{
				font-size: 24rpx;
				color: #38a4ea;
				span{
					color: #999999;
				}
			}
		}
		.Lu-code-congxin{
			font-size: 24rpx;
			color: #38a4ea;
		}
		
	}
</style>
